
@extends('common.header')

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>重置密码</title>
	<!-- 1.添加meta csrf_token -->
	<meta name="csrf-token" content="{{ csrf_token() }}">  
	<script src=" {{ asset('/js/jquery-1.8.3.min.js') }} "></script>
	<script>
		<!-- 2.设置全局ajax选项 -->
		$.ajaxSetup({
			headers: {
				'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
			}
		});
		var _token = $('meta[name="csrf-token"]').attr('content');
	</script>

    <!-- 引入Bootstrap的样式表 -->
    <link rel="stylesheet" type="text/css" href="{{ asset('/bootstrap/css/bootstrap.min.css') }}">
    <style>
        .login_animation{
            width: 2px;
            height: 0;
            background: #333;
            transition: 4s;
            position: absolute;
            top: 30px;
            left: 50px;
        }
        .login_animation img{
            width: 80px;
            height: 80px;
            position: absolute;
            bottom: -50px;
            left: -40px;
        }
        .login_animation:hover{
            height: 100px;
        }
		label{color:#333}
    </style>
</head>
<body>
<div class="container" style="width: 530px;border: 1px solid #9d9d9d;border-radius: 4px;margin: 100px auto 0;background: #fff;padding: 20px;position: relative;margin-top:200px;display:block;">
    <div class="col-xs-offset-2 col-xs-8">
        
		
		
		<!-- 重置密码 获取验证码 -->
        <a href="#" class="form-group get_code" id="get_code" style="text-decoration: none">
                
				<legend>重置密码</legend>
                <!--手机号-->
                <div class="form-group">
                    <label style="margin:10px 0 6px">请输入您注册时的手机号</label>
                    <div class="password-input-wrapper ember-view">
                        <input type="text" name="phone" placeholder="手机号" class="form-control ember-text-field ember-view" required oninvalid="setCustomValidity('请输入手机号！');" oninput="setCustomValidity('');" style="font-size: 12px" value="{{ old('phone') }}" />
                    </div>
                </div>
                
				<!--验证码-->
                <div class="form-group form_code">
                    
					<label>验证码</label>
					<div class="password-input-wrapper ember-view" style="position: relative">
                        <input type="text" name="phoneCode" placeholder="请输入4位验证码"class="form-control ember-text-field ember-view" required oninvalid="setCustomValidity('请输入4位验证码');" oninput="setCustomValidity('');" style="font-size: 12px;width:180px;">
                        <div  id="getPhoneCodePass" class="btn btn-group-md btn-default" style="position: absolute;right: 0;top: 2px;font-size: 12px;width:80px;">获取验证码
                        </div>
                    </div>

                </div>
				<!--提示信息-->
                <div class="form-group text-danger" id="phoneError" >
                </div>
				
				<!-- 提交按钮 -->
				<div class="form-group" >
					<div class="ember-view">
						<input id="checkPhone" type="submit" class="btn btn-loading   btn btn-danger btn-lg btn-block btn-loading-text btn-md" style="font-weight: 500;font-size: 14px" num="0" value=" 下 一 步 " />
					</div>
				</div>
				
		   
        </a>
        
		
		
		<!--重置密码-->
        <a href="#" class="form-group reset_password " id="reset_password" style="display: none;text-decoration: none">
                
				<legend>重置密码</legend>
                <!--密码-->
                <div class="form-group">
                    <label>新密码</label>
                    <div class="password-input-wrapper ember-view">
                        <input type="password" name="pass" placeholder="请输入新密码" class="form-control ember-text-field ember-view" required oninvalid="setCustomValidity('请输入密码！');" oninput="setCustomValidity('');"style="font-size: 12px">
                    </div>
                </div>
				
				
                <!--确认密码-->
                <div class="form-group">
                    <label>确认密码</label>
                    <div class="password-input-wrapper ember-view">
                        <input type="password" name="repass" placeholder="再次输入新密码" class="form-control ember-text-field ember-view" required oninvalid="setCustomValidity('请再次输入密码！');"oninput="setCustomValidity('');"style="font-size: 12px">
                    </div>
                </div>
                <!--提示信息-->
                <div class="form-group text-danger" id="passError" ></div>
				
				<!-- 提交按钮 -->
				<div class="form-group" >
					<div class="ember-view">
						<input id="resetPass" type="submit" class="btn btn-loading   btn btn-danger btn-lg btn-block btn-loading-text btn-md" style="font-weight: 500;font-size: 14px" num="0" value=" 下 一 步 " />
					</div>
				</div>
        </a>
		



        <!--提交成功-->
        <a href="#" class="form-group modify_success " id="modify_success" style="display: none;text-decoration: none;width:400px;">
            <legend>密码修改成功<br/>即将为您打开登录界面</legend>
		</a>
		
		
    </div>
   
   <div class="login_animation">
        <img src="images/login.jpg" alt="login"/>
    </div>
	
</div>

<div id="code" code="" ><div>
<div id="phone" phone="" ><div>

<!-- 引入jquery、Bootstrap的js文件 -->
<script type="text/javascript" src="{{ asset('/js/jquery-1.9.1.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('/bootstrap/js/bootstrap.min.js') }}"></script>

<script>
	
	
	var pass_mytime = null;		// 用于 何时 开始倒计时
	var pass_total = 60;		// 验证码倒计时
	
	// 倒计时
	function pass_clock(){
		
		if(pass_total==0){
			// 可以重新获取验证码了
			$("#getPhoneCodePass").attr('disabled',false);
			$("#getPhoneCodePass").html('获取验证码');
			pass_mytime=null;
			pass_total=60;
			return false;
		}
		$("#getPhoneCodePass").html( pass_total+"秒" );
		pass_total--; 
		pass_mytime=setTimeout("pass_clock()",1000);
		
	}
	
	$(function()
	{
		
		// 发送 手机验证码
		$("#getPhoneCodePass").click(function()
		{
			// 获取电话
			var phone = $("input[name='phone']").val();
			$.ajax({
				type:"post",
				// 加 1 是为了注明是重置密码
				url:"{{ url('/getPhoneCode') }}/"+1,
				data:{phone:phone,_token:_token},
				async:true,    						
				dataType:"json",
				success:function(back)
				{
					$('#phoneError').html( '' );
					// 显示错误信息
					$('#phoneError').html( back['show_info'] );
					$("#phoneError").slideDown(1500);
					$("#phoneError").delay(1500).slideUp(1500);	
					$("#code").attr( 'code',back['url'] );
					if(  back['show_info']=='发送成功，请注意查收' )
					{
						$("#getPhoneCodePass").attr('disabled',true);
						if( pass_mytime==null )
						{ 
							// 开始倒计时
							pass_clock(); 
						}
					}
				}
				
			});
		});
		
		
		// 验证 手机号
		$("#checkPhone").click(function()
		{
			var phone = $("input[name='phone']").val();
			var phoneCode = $("input[name='phoneCode']").val();
			var code = $("#code").attr('code');
			// 注册
			var url = "{{ url('/checkPhone') }}";
			$.ajax({
				type:"post",
				url:url,
				data:{phone:phone,phoneCode:phoneCode,code:code,_token:_token},
				async:true,    						
				dataType:"json",
				success:function(back){
					$('#phoneError').html( '' );
					$("#phoneError").slideDown(1000);
					// 显示错误信息
					$('#phoneError').html( back['show_info'] );
					$("#phoneError").delay(1500).slideUp(1000);
					// 放上 手机号
					$("#phone").attr( 'phone',back['url'] );
					if( back['show_info']=='验证通过' )
					{
						// 定时 更换
						setTimeout(function()
						{
							$('#get_code').hide();
							$('#reset_password').show();
						},1500);
					}
					
				}
			});
		});
		
		
		
		// 执行 重置密码
		$("#resetPass").click(function()
		{
			var pass = $("input[name='pass']").val();
			var repass = $("input[name='repass']").val();
			var phone = $("#phone").attr('phone');
			// 重置
			var url = "{{ url('/doreset') }}";
			$.ajax({
				type:"post",
				url:url,
				data:{pass:pass,repass:repass,phone:phone,_token:_token},
				async:true,    						
				dataType:"json",
				success:function(back){
					
					$('#passError').html( '' );
					$("#passError").slideDown(1500);
					// 显示错误信息
					$('#passError').html( back['show_info'] );
					$("#passError").delay(1500).slideUp(1500);
					if( back['show_info']=='重置成功' )
					{
						// 定时 更换
						setTimeout(function()
						{
							// 其他 页面 隐藏
							$('#get_code,#reset_password').hide();
							// 成功页 显示
							$('#modify_success').show();
							
						},1500);
						setTimeout(function()
						{
							// 登录注册 出现
							$("i").show();
							$("#container").show();
							$("#dologinForm").attr('action',"{{ url('/doLogin') }}/shouye");
						},3500);
					}
				}
			});
		});
		
		
		
		
		
	})
		
		
</script>

</body>
</html>